<!DOCTYPE html>
<html>
<head>
    <title>姓氏统计</title>
    {% load static %}
{#    在线一个指向 jsDelivr CDN 的链接。#}
{#    jsDelivr 是一个流行的免费 CDN 服务，用于托管和分发开源项目，特别是 NPM（Node Package Manager）上的包。#}
    <script src="{% static 'js/chart.js' %}"></script>
    <style>
        center {
            position: relative;
        }
        .logout-btn {
            position: absolute;
            top: 1%;
            right: 30%;
        }
        a:link{
	        color:black;
	        text-decoration:none;
        }
        a:visited{
	        color:black;
        }
    </style>
</head>
<body>
    <center>
        <h3>姓氏人数统计</h3>
        <a href="/polls/character/" onclick="goBack()" class="logout-btn">退出</a>
        <div style="width: 70%">
            <canvas id="chart"></canvas>
        </div>
{#以下基于 Chart.js 的柱状图的 JavaScript 代码片段。如果将其直接写在 HTML 文件中，通常可以正常运行，#}
        {#但如果单独写到一个 .js 文件中可能会报错#}
        <script>
            new Chart(document.getElementById('chart'), {
                type: 'bar',
                data: {
                    {#labels 是一个数组，包含图表的 X 轴标签。#}
{#                    {{ labels|safe }} 是模板引擎的语法，表示将 labels 变量的值插入到 JavaScript 代码中。#}
{#                    |safe 是一个过滤器，确保内容被安全地渲染为 JavaScript 代码，避免 HTML 转义。#}
                    labels: {{ labels|safe }},
{#datasets 是一个数组，包含图表的数据集。每个数据集是一个对象，包含以下属性：#}
{#data：数据集的数据。#}
{#backgroundColor：数据集的背景颜色。#}
                    datasets: [{
                        data: {{ data|safe }},
                        backgroundColor: {{ data|safe }}.map((_, i) => {
                            switch (i % 3) {
                                case 0: return '#4CAF50'; // 第一种颜色
                                case 1: return '#2196F3'; // 第二种颜色
                                case 2: return '#FFC107'; // 第三种颜色
                            }
                        })
                    }]
                },
                options: {
                    plugins: {
                        legend: {
                            display: false  // 关键点：强制隐藏图例
                        },
                    }
                }
            });
        </script>
    </center>
</body>
</html>